<template>
	<div class="crumbs">
		<!-- 面包屑 -->
		<div class="crumbs">
			<div class="crumbs-item" v-for="(i, j) in PathAccessHistory" :key="j" @click="onSkip(j)" :data-id="i.id">
				<span>{{ i.text }}</span>
				<div class="theMiddletriangle"></div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		path: {
			type: [Array],
			default: function() {
				return [{ id: 1, text: '面包' }];
			}
		}
	},
	name: 'crumbs',
	data() {
		return {
			PathAccessHistory: [] // 路径访问历史
		};
	},
	created() {
		this.PathAccessHistory = this.path;
		console.log(this.path);
		this.init();
	},
	watch: {
		PathAccessHistory() {
			this.init();
		},
		path() {
			this.PathAccessHistory = this.path;
		}
	},
	methods: {
		// 初始化面包屑
		init() {
			let that = this;
			// 在PathAccessHistory数组操作完后执行
			this.$nextTick(() => {
				let crumbsItem_List = document.querySelectorAll('.crumbs-item'), // 面包屑item
					theMiddletriangle_List = document.querySelectorAll('.theMiddletriangle'); // 面包屑item的中间件的三角形
				// 每添加一个路径 滚轮就移动动态距离
				// document.querySelector('.crumbs').scrollLeft = document.querySelector('.crumbs').scrollWidth - crumbsItem_List[crumbsItem_List.length-1].offsetWidth
				document.querySelector('.crumbs').scrollLeft = document.querySelector('.crumbs').scrollWidth;
				// 注册路径的点击事件
				crumbsItem_List.forEach((i, j) => {
					i.onclick = function() {
						let index = that.PathAccessHistory.findIndex(item => item.id == i.getAttribute('data-id'));
						if (j == that.PathAccessHistory.length - 1) return; // 点击最后一个目录不做操作
						that.PathAccessHistory = that.PathAccessHistory.slice(0, index + 1);
					};
				});
				// 初始化类名
				for (let i = 0; crumbsItem_List[i]; i++) {
					crumbsItem_List[i].classList.remove('crumbs-item-active');
					crumbsItem_List[i].classList.remove('crumbs-item-activeS');
					theMiddletriangle_List[i].classList.remove('theMiddletriangle-active');
				}
				// 目录数组的 第一块初始化
				if (crumbsItem_List.length == 1) {
					theMiddletriangle_List[0].classList.add('theMiddletriangle-active');
					return;
				}
				// 变量赋值类名
				for (let i = 0; crumbsItem_List[i]; i++) {
					if (i == crumbsItem_List.length - 1) {
						// 目录数组的 最后一块三角形中间件隐藏
						theMiddletriangle_List[i].classList.add('theMiddletriangle-active');
						return;
					}
					crumbsItem_List[i].classList.add('crumbs-item-active'); //添加激活类名
					if (i == crumbsItem_List.length - 2) {
						//  目录数组的 最后第二块三角形伪类背景改为跟面包屑背景颜色一样
						crumbsItem_List[i].classList.add('crumbs-item-activeS');
					}
				}
			});
		},
		// 点击单个路径 跳转
		onSkip(index) {
			// 点击最后一个路径 不做操作
			if (index == this.PathAccessHistory.length - 1) return;
			let arr = this.PathAccessHistory.slice(0, index + 1); // 切割

			// 组装路径    	cxy/aa/cc/
			let return_path = '';
			for (let i = 0; arr[i]; i++) {
				return_path += arr[i].text + '/';
			}
			// 重刷文件路径接口
			this.$emit('freshFolder', return_path);
		}
	}
};
</script>

<style lang="less" scoped="scoped">
@bgcolor: #ebebeb;
@activeColor: #fff;
/* 面包屑盒子 */
.crumbs {
	height: 44px;
	font-size: 14px;
	display: flex;
	width: 100%;
	white-space: nowrap;
	overflow-x: scroll;
	background-color: @bgcolor;
	display: flex;
	align-items: center;
}

/* 每块路径 */
.crumbs-item {
	height: 40px;
	line-height: 40px;
	box-sizing: border-box;
	display: flex;
}

/* 每块路径下的文本块 */
.crumbs-item > span {
	padding: 0 10px;
	max-width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 第一个重改margin-left */
.crumbs-item:nth-child(1) {
	margin-left: 0;
}

/* after伪类的三角形 */
.crumbs-item::after {
	box-sizing: border-box;
	content: '';
	display: inline-block;
	margin-left: -38px;
	border-top: 20px solid transparent;
	border-left: 20px solid transparent;
	border-right: 0px solid transparent;
	border-bottom: 20px solid transparent;
	z-index: 1;
}

/* 中间件的三角形 */
.theMiddletriangle {
	border-top: 20px solid transparent;
	border-left: 20px solid @activeColor;
	border-right: 20px solid transparent;
	border-bottom: 20px solid transparent;
	z-index: 3;
}
/* 面包屑路径激活 */
.crumbs-item-active {
	background-color: @activeColor;
}
/* 面包屑路径激活,覆盖伪类 */
.crumbs-item-active::after {
	background-color: @activeColor;
	border-left: 20px solid @bgcolor;
}

/* 覆盖白色区域 */
.crumbs-item-activeS::after {
	background-color: @bgcolor;
}

/* 中间件三角形块隐藏 */
.theMiddletriangle-active {
	visibility: hidden;
}
</style>
